<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>028-动画案例（跑马灯）</title>
		<style>
			.box {
				width: 300px;
				margin: 100px auto;
				border: 1px solid black;
				font-size: 0;
				/* overflow: hidden; */
			}

			.box:hover span {
				animation-play-state: paused;
			}

			span {
				font-size: 24px;
				display: inline-block;
				border: 1px solid black;
				animation: move 7s linear infinite;
			}

			@keyframes move {
				from {
				}
				to {
					transform: translateX(300px); /* 这个 300px 是指 span元素盒子左边 最终到达的位置 */
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<span>跑马灯王大翠</span>

			<!-- <span>跑</span>
			<span>马</span>
			<span>灯</span>
			<span>王</span>
			<span>大</span>
			<span>翠</span> -->
		</div>
	</body>
</html>
